<template>
	<div class="content">
		<view class="my-msg">
			<view class="msges">
				<view class="titls">
					<view class="before"></view>景区简介
				</view>
				<view class="titls-cont" v-html="detail.introduction"></view>
			
				<!-- <view class="titls">演出详情</view>
				<view class="titls-cont">xxxx</view> -->
			</view>
			<view class="msges">
				<view class="titls">
					<view class="before"></view>景区攻略
				</view>
				<view class="titls-cont" v-html="detail.announcements"></view>
			
				<!-- <view class="titls">演出详情</view>
				<view class="titls-cont">xxxx</view> -->
			</view>
			<view class="msges">
				<view class="titls">
					<view class="before"></view>景区交通
				</view>
				<view class="titls-cont" v-html="detail.transportationGuide"></view>
			
				<!-- <view class="titls">演出详情</view>
				<view class="titls-cont">xxxx</view> -->
			</view>
		</view>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				detail: {}
			}
		},
		onLoad(params) {
			this.getData(params)
		},
		methods: {
			getData(params) {
				this.$http({
					url: this.$myApi.scenicSpots + '/' + (params.id || '1762046178057445378'),
					method: 'GET',
					hideLoading: true,
					data: {},
					success: res => {
						res.data.introduction = (res.data.introduction).replace(/\<img/gi,
							'<img style="width: 100%" '
						)
						res.data.transportationGuide = (res.data.transportationGuide).replace(/\<img/gi,
							'<img style="width: 100%" '
						)
						res.data.announcements = (res.data.announcements).replace(/\<img/gi,
							'<img style="width: 100%" '
						)
						this.detail = res.data;
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 690rpx;
		margin: 0 auto;
	
		.my-msg {
			height: 100%;
			width: 690rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			margin-top: 15rpx;
			background: #FFFFFF;
			padding: 28rpx 27rpx 20rpx 26rpx;
			padding-bottom: 68rpx;
	
			.msges {
				.titls {
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #1C1C1C;
					padding-left: 6rpx;
					position: relative;
					margin-top: 4rpx;
	
					.before {
						display: block;
						position: absolute;
						width: 2rpx;
						height: 30rpx;
						background-color: #FF3300;
						top: 8rpx;
						left: 0rpx;
	
					}
				}
	
				.titls-cont {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #232323;
					line-height: 42rpx;
					margin-top: 14rpx;
				}
			}
	
			.mp-list {
				>view {
					border-bottom: 1rpx solid #DBDBDB;
	
					.btn {
						width: 130rpx;
						height: 58rpx;
						border-radius: 10rpx;
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						background-color: #0DBA5A;
						line-height: 58rpx;
						text-align: center;
						margin-bottom: 26rpx;
						cursor: pointer;
						user-select: none;
						margin-left: 500rpx;
	
					}
	
					.row-box {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						padding: 22rpx 24rpx 20rpx 10rpx;
						position: relative;
	
						.right-btn {
	
							font-size: 40rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							color: #FF6F00;
							display: flex;
							align-items: center;
							position: absolute;
							right: 14rpx;
							top: 62rpx;
	
	
						}
	
						.detail {
							width: 620rpx;
							font-size: 22rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							color: #393939;
							line-height: 24rpx;
							// white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
	
						.mpname {
							font-size: 22rpx;
							font-family: PingFang SC, PingFang SC;
							// font-weight: bold;
							color: #212121;
							margin-bottom: 20rpx;
						}
	
						.name {
							// height: 42rpx;
							font-size: 30rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							margin-bottom: 18rpx;
							color: #1C1C1C;
	
						}
					}
				}
			}
	
			.location {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 1rpx solid #DBDBDB;
	
				.text-box {
					.title {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #212121;
						margin-bottom: 22rpx;
						margin-top: 14rpx;
	
	
					}
	
					.cont {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #212121;
						margin-bottom: 12rpx;
					}
				}
	
				.img-box {
					display: flex;
					align-items: center;
	
					.img13,
					.img14 {
						width: 52rpx;
						height: 52rpx;
					}
	
					.img13 {
						margin-right: 23rpx;
					}
				}
	
			}
	
			.money {
				border-bottom: 1rpx solid #DBDBDB;
				display: flex;
				flex-direction: row;
				font-size: 24rpx;
				color: #FF6F00;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-bottom: 20rpx;
			}
		}
	
		.top-view {
			width: 690rpx;
			// height: 357rpx;
			background: #3D3D3D;
			border-radius: 0px 0px 0rpx 0px;
			padding-bottom: 20rpx;
	
			.btns {
				display: flex;
				flex-direction: row;
				padding-left: 51rpx;
				padding-right: 51rpx;
				justify-content: space-between;
	
				.left-btn,
				.right-btn {
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					width: 240rpx;
					height: 58rpx;
					background-color: #636363;
					text-align: center;
					line-height: 58rpx;
					cursor: pointer;
					user-select: none;
					position: relative;
					border-radius: 10rpx;
	
					&:active {
						// background-color: #FF8000;
					}
	
					&.active {
						background-color: #FF8000;
					}
	
					&.left-btn-active {
						background-color: #FF8000;
						color: #fff;
					}
				}
			}
	
			.conts {
				padding: 20rpx 51rpx 25rpx 41rpx;
				display: flex;
				flex-direction: row;
	
				.font-conts {
					color: #fff;
					width: 380rpx;
	
					display: flex;
					flex-direction: column;
					justify-content: space-between;
	
					.title {
						font-size: 30rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}
	
					.title-instroduction {
						// font-size: 24rpx;
						// font-family: PingFang SC, PingFang SC;
						// font-weight: 500;
						// color: #FFFFFF;
						// // margin-top: 22rpx;
						// white-space: nowrap;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// height: 120rpx;
						// display: -webkit-box;
						//   -webkit-line-clamp: 4; /* 控制显示行数 */  
						//   -webkit-box-orient: vertical;  
						//   overflow: hidden;  
						//   text-overflow: ellipsis;  
						//   word-wrap: break-word; /* 防止内容被强制折行 */  
						height: 118rpx !important;
						margin-top: -2rpx;
						display: -webkit-box;
						-webkit-line-clamp: 4 !important;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						font-size: 22rpx;
						color: #FFFFFF;
					}
	
					.time {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						// margin-top: 22rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
	
					.btn {
						color: #FF3400;
						padding: 8rpx 14rpx;
						width: fit-content;
						border: 1rpx solid #FF3400;
						zoom: 0.8;
						// margin-top: 20rpx;
					}
				}
	
				.img12 {
					width: 184rpx;
					height: 230rpx;
					background: #CACACA;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin-right: 40rpx;
				}
			}
		}
	}
	
	
</style>

<style>
	page {
		background: #EFEFEF;
	}
</style>